<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        function f() {
            let a = document.getElementById("name").value;
            let b = document.getElementById("password").value;
            if (a == "admin" && b == "123") {
                alert("验证成功");
                window.location.href = "http://47.116.207.219/homePage";
            } else {
                document.getElementById("name").value = "";
                document.getElementById("password").value = "";
                alert("账号或密码错误");
            }
        }
    </script>
    <style>
        body{
            background-image: url('https://i.alipayobjects.com/e/201311/1V4nsyvMbt_src.jpg');
            background-repeat: no-repeat;
            background-size: cover;
        }
        
         #b{
            padding: 0 20px;
            background-color:dimgrey;
            display: inline;
            background: rgba(51, 50, 50, 0.4);
            border-radius: 10px;
            position: absolute;
            top: 30%;
            left:60%;
            text-align:center;
            height: 180px;
         }
         #a{
           margin: 10px 5px;
           font-size: 20px;
           color:aliceblue;
         }
         .t{
            color:aliceblue;
         }
         hr{
            margin: 0px 0px 5px;  
         }
         #zz{
            display: inline;
            position: absolute;
            top: 70%;
            left:35%;
         }
         p{
            font-size: 10px;
           color:aliceblue;
         }
         #div1{
            position: fixed; 
    top: 0;
    left: 0;  
    height: 50;
    width: 100%;  
    background-color: black; 
    color: white; 
    text-align: center; 
    padding: 10px 0;  
    z-index: 100; 
  
         }
         #div1>p{
           font-size: 10px;
           color:aliceblue;
           margin-top: 0%;
           margin-bottom: 0%;
         }
         .c{
            margin: 6px ;
         }

  
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <link rel="icon" href="https://img.alicdn.com/tfs/TB1qEwuzrj1gK0jSZFOXXc7GpXa-32-32.ico" type="image/x-icon" >  
</head>
<body>
    <div id="div1">
        <p>湖大知行<p>
    </div>


<div id="b">
    <p id="a">登录</p>
    <hr>
    <label for="name" class="t">用户名：</label>
    <input type="text" class="c" id="name" name="name" required><br>
    <label for="password" class="t">密&emsp;码：</label>
    <input type="text" class="c" id="password" name="password" required><br>
    <button type="button" style="
    background-color:#00AAEE; color: white;
    border-radius: 5px; border: none; width: 150px; height: 30px;
    margin-top: 25px;"onclick="f()">登录</button>
</div>
<div id="zz"> 
    <p>关于支付宝 | 诚征英才 | 联系我们 | International Business | About Alipay</p><br>
    <p style="text-align:center;">ICP证：合字B2-20190046</p>
</div>
</body>
</html>